<template>
    <div
        ref="msg"
        class="message-box"
        @mouseover="closeTimer()"
        @mouseout="openTimer()"
    >
        {{ msg }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: "默认值",
            time: 3000,
            timer: null,
        };
    },
    methods: {
        closeTimer() {
            if (this.timer != null) {
                this.$refs.msg.style.animation = "";
                this.$refs.msg.style.transform = "translate(-50%, 100%)";
                clearTimeout(this.timer);
            }
        },
        openTimer() {
            this.$refs.msg.style.animation = "fadeOut 1000ms ease";
            this.$refs.msg.style.transform = "translate(-50%, -110%)";
            setTimeout(() => {
                this.$destroy();
            }, 1000);
        },
    },
    mounted() {
        // this.$el
        document.body.appendChild(this.$el);
        this.$refs.msg.style.animation = `showTip ${this.time}ms ease`;
        this.timer = setTimeout(() => {
            this.$destroy();
        }, this.time + 100);
    },
    beforeDestroy() {
        document.body.removeChild(this.$el);
    },
};
</script>
<style scoped>
.message-box {
    position: fixed;
    top: 0px;
    left: 50%;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 0px 0px 4px 2px #cccccc;
    max-width: 200px;
    min-width: 80px;
    text-align: center;
    font-size: 14px;
    transform: translate(-50%, -110%);
    /* animation: showTip 3s ease; */
    z-index: 9999999;
}
</style>
<style>
@keyframes showTip {
    0%,
    100% {
        transform: translate(-50%, -110%);
    }

    20%,
    80% {
        transform: translate(-50%, 100%);
    }
}
@keyframes fadeOut {
    0% {
        transform: translate(-50%, 100%);
    }
    100% {
        transform: translate(-50%, -110%);
    }
}
</style>